import { FC } from "react";
import { AlertInfo } from "../../types";
import SectionHeader from "../SectionHeader";
import styles from "./index.module.less";

interface AlertStatusProps {
  alerts: AlertInfo[];
  hideTitle?: boolean;
  title?: string;
  isLoading?: boolean;
}

const AlertStatus: FC<AlertStatusProps> = ({ alerts, hideTitle, title = "异常预警状态", isLoading = false }) => {
  // 获取预警类型对应的样式类
  const getAlertTypeClass = (type: string) => {
    switch (type) {
      case 'alarm': return styles['alert-alarm'];
      case 'warning': return styles['alert-warning'];
      case 'normal': return styles['alert-normal'];
      default: return '';
    }
  };

  const getAlertTypeTextClass = (type: string) => {
    switch (type) {
      case 'alarm': return styles['alert-alarm-text'];
      case 'warning': return styles['alert-warning-text'];
      case 'normal': return styles['alert-normal-text'];
      default: return '';
    }
  };
  
  // 获取预警类型对应的图标
  const getAlertTypeIcon = (type: string) => {
    switch (type) {
      case 'alarm': return <div className={styles['icon-alarm']} />;
      case 'warning': return <div className={styles['icon-warning']} />;
      case 'normal': return <div className={styles['icon-normal']} />;
      default: return null;
    }
  };

  // 获取预警类型对应的文本
  const getAlertTypeText = (type: string) => {
    switch (type) {
      case 'alarm': return '报警';
      case 'warning': return '预警';
      case 'normal': return '正常';
      default: return '';
    }
  };

  return (
    <div className={`${styles["alert-section"]} ${isLoading ? styles["loading"] : ''}`}>
      {!hideTitle && <SectionHeader title={title} />}
      <div className={styles["alert-list"]}>
        {alerts.map((alert, index) => (
          <div key={index} className={styles["alert-wrapper"]}>
            <div className={`${styles["alert-icon-box"]} ${getAlertTypeClass(alert.type)} ${isLoading ? styles["loading-item"] : ''}`}>
              <div className={styles["icon-container"]}>
                {getAlertTypeIcon(alert.type)}
              </div>
              <div className={styles["alert-type-text"]}>
                {getAlertTypeText(alert.type)}
              </div>
            </div>
            <div className={styles["alert-info"]}>
              <div className={styles["current-count"]}>
                <span className={styles["label"]}>当前报警</span>
                <span className={`${styles["count-number"]} ${getAlertTypeTextClass(alert.type)}`}>
                  {isLoading ? '--' : alert.count}
                </span>
              </div>
              <div className={styles["total-count"]}>
                <span className={styles["label"]}>累计发生</span>
                <span className={`${styles["count-number"]} ${getAlertTypeTextClass(alert.type)}`}>
                  {isLoading ? '--' : alert.details}
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default AlertStatus; 